<template>
    <div class="atoname" :class="datas.cmpt_class || []" :style="datas.cmpt_style || {}">
            <el-row :gutter="10">
                <el-col :span="8">
                    <div class="boxGrid">
                        <el-input placeholder="请输入内容" v-model="transferData.treeData.getTreeVal" @input="filterNodeHandle" suffix-icon="el-icon-search" clearable></el-input>   
                        <div class="content" :style="{height: transferData.contentHeight + 'px'}">
                            <el-tree
                                :ref="transferData.treeData.treeRef"
                                :props="transferData.treeData.props"
                                :load="loadNode"
                                :filter-node-method="filterNode"
                                :lazy="true"
                                :accordion="!transferData.treeData.accordion ? false : transferData.treeData.accordion"
                                :check-on-click-node="!transferData.treeData.checkOnClickNode ? false : transferData.treeData.checkOnClickNode"
                                :expand-on-click-node="!transferData.treeData.expandOnClickNode ? false : transferData.treeData.expandOnClickNode"
                                :default-expand-all="!transferData.treeData.defaultExpandAll ? false : transferData.treeData.defaultExpandAll"
                                node-key="id"
                                @check="treeSelChange"
                                @check-change="treeCheckChange"
                                @node-expand="nodeExpand"
                                show-checkbox>
                            </el-tree>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="boxGrid">
                        <div class="listSelect">
                            <el-input 
                                placeholder="请输入内容" 
                                v-model="transferData.listData.getListVal" 
                                @input="listValChange" 
                                suffix-icon="el-icon-search"
                                clearable>
                            </el-input>
                            <el-button
                                v-if="transferData.listData.isCheckAll"
                                @click.native="handelcheckAll($event)"
                                :type="transferData.listData.btn_data.btnType"
                                :size="transferData.listData.btn_data.btnSize"
                                :round="transferData.listData.btn_data.btnRound"
                                :circle="transferData.listData.btn_data.btnCircle"
                                :loading="transferData.listData.btn_data.btnLoading"
                                :disabled="transferData.listData.btn_data.btnDisabled"
                                class="btnmargin">
                                {{transferData.listData.btn_data.btnContent}}
                            </el-button>
                        </div>
                        <div v-if="transferData.listData.listItemData.length > 0">
                            <div class="content" :style="{height: transferData.contentHeight + 'px'}">
                                <p v-if="transferData.listData.isRadio">
                                    <el-row v-for="(item,i) in transferData.listData.listItemData" :key="i">
                                        <el-radio class="radioCheckitem" @click.native="clearBubble($event)" v-model="transferData.listData.selRadioListData" @change="selRadioChange(item)" :label="item">{{item.value}}</el-radio>
                                    </el-row>
                                </p>
                                <p v-if="transferData.listData.isCheckbox">
                                    <el-row>
                                        <el-checkbox-group v-model="transferData.listData.selCheckListData">
                                            <p v-for="(item,i) in transferData.listData.listItemData" :key="i">
                                                <el-checkbox @click.native="clearBubble($event)" @change="selCheckChange(item)" class="radioCheckitem" :label="item.id">{{item.value}}</el-checkbox>
                                            </p>
                                        </el-checkbox-group>
                                    </el-row>
                                </p>
                            </div>
                        </div>
                        <p class="noData" v-else>
                            <span>暂无数据</span>
                        </p>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="boxGrid">
                        <el-input
                            v-if="transferData.listData.isCheckbox"
                            placeholder="请输入内容" 
                            v-model="transferData.selData.getSelVal" 
                            @input="selValChange" 
                            suffix-icon="el-icon-search"
                            clearable>
                        </el-input>  
                        <div v-if="transferData.selData.selListData.length > 0">
                            <div class="content" :style="{height: transferData.contentHeight + 'px'}">
                                <p v-if="transferData.selData.selListData" class="selList">
                                    <span class="flexList" v-for="(item,i) in transferData.selData.selListData" :key="i" :label="item.id">
                                        <span class="selListName">{{item.value}}</span>
                                        <el-button size="mini" icon="el-icon-delete" circle @click.native="delSelListData(item,i,$event)"></el-button>
                                    </span>
                                </p>
                            </div>
                        </div>
                        <p class="noData" v-else>
                            <span>暂无数据</span>
                        </p>
                    </div>
                </el-col>
            </el-row>
            <el-row class="savebottom">
                <span v-if="transferData.button_data">
                    <span
                        v-for="(item,index) in transferData.button_data"
                        :key="index">
                        <el-button
                            v-if="item.judgeType == 'btn'"
                            @click.native="eventManage(item,$event)"
                            :type="item.btnType"
                            :size="item.btnSize"
                            :round="item.btnRound"
                            :circle="item.btnCircle"
                            :loading="item.btnLoading"
                            :disabled="item.btnDisabled"
                            class="btnmargin">
                            {{item.btnContent}}
                        </el-button>
                    </span>
                </span>
            </el-row>
    </div>
</template>  
<script>
export default{
    name: 'transferTreeListValueAllcmpt',
    props: {
        datas:{
            type: Object,
            default() {
                return {
                    attr_data_conf:`{
                        treeData:{
                            getTreeVal:'', // 搜索树input的model
                            treeRef: 'treeLazy',
                            props:{
                                label: 'basic_indicator_name',
                                disabled:(data,node)=>{
                                    if(node.level > 1)return false;
                                    else return true;
                                },
                                isLeaf: (data,node)=>{
                                    if(node.level > 1)return true;
                                    else return data.leaf;
                                }
                            },
                            accordion: false,
                            checkOnClickNode: false,
                            expandOnClickNode: true,
                            defaultExpandAll: false
                        },
                        listData:{
                            getListVal: '', // 列表input的model
                            isRadio: false, // 列表单选，与isCheckbox只能有一个为true，一个为false
                            isCheckbox: true, // 列表多选
                            isCheckAll: false, // 是否需要全选
                            btnIsChecked: true, //全选按钮是否已点击
                            listItemData: [], // 列表数据
                            copyListItemData: [], // 复制列表数据
                            selRadioListData: '', // 列表单选model
                            selCheckListData: [], // 列表多选model
                            btn_data: {
                                btnType:'primary',
                                btnSize:'mini',
                                btnRound:false,
                                btnCircle:false,
                                btnLoading:false,
                                btnDisabled:false,
                                btnContent:'全选'
                            },
                        },
                        selData:{
                            getSelVal: '', // 列表选择后input的model
                            selListData:[], // 选择的列表数据
                            copySelListData:[], // 复制选择的列表数据
                        },
                        contentHeight: 300, // 内容区域高度
                        button_data:[
                            {
                                judgeType:'btn',
                                eName:'onSubmit',
                                btnType:'primary',
                                btnSize:'mini',
                                btnRound:false,
                                btnCircle:false,
                                btnLoading:false,
                                btnDisabled:false,
                                btnContent:'保存'
                            },
                            {
                                judgeType:'btn',
                                eName:'unSubmit',
                                btnType:'',
                                btnSize:'mini',
                                btnRound:false,
                                btnCircle:false,
                                btnLoading:false,
                                btnDisabled:false,
                                btnContent:'取消'
                            }
                        ]
                    }`,
                    intf:{},
                    intf_eName_conf:[],
                    cross_parameter_name: '',
                    event_ele_conf:`{
                        // 懒加载树
                        loadNode:function(node, resolve) {
                            let data = [
                                { 
                                    basic_indicator_name: '对象1',
                                    id:Math.ceil(Math.random() * 100).toString(),
                                },
                                { 
                                    basic_indicator_name: '对象2',
                                    id:Math.ceil(Math.random() * 1000).toString(),
                                },
                                { 
                                    basic_indicator_name: '对象3',
                                    id:Math.ceil(Math.random() * 10000).toString(),
                                },
                                { 
                                    basic_indicator_name: '对象4',
                                    id:Math.ceil(Math.random() * 100000).toString(),
                                },
                                { 
                                    basic_indicator_name: '对象5',
                                    id:Math.ceil(Math.random() * 1000000).toString(),
                                },
                            ]
                            if (node.level === 0) {
                                data.forEach(item => {
                                    item.disabled = true;
                                })
                                return resolve(data);
                            }
                            if (node.level === 1) {
                                return resolve([
                                    { 
                                        basic_indicator_name: '分类1',
                                        id:Math.ceil(Math.random() * 10000000).toString(),
                                    },
                                    { 
                                        basic_indicator_name: '分类2',
                                        id:Math.ceil(Math.random() * 10000000).toString(),
                                    },
                                    { 
                                        basic_indicator_name: '分类3',
                                        id:Math.ceil(Math.random() * 10000000).toString(),
                                    },
                                    { 
                                        basic_indicator_name: '分类4',
                                        id:Math.ceil(Math.random() * 10000000).toString(),
                                    },
                                    { 
                                        basic_indicator_name: '分类5',
                                        id:Math.ceil(Math.random() * 10000000).toString(),
                                    },
                                    { 
                                        basic_indicator_name: '分类6',
                                        id:Math.ceil(Math.random() * 10000000).toString(),
                                    }
                                ]);
                            }
                        },
                        // input输入框事件
                        filterNodeHandle:function(){
                            this.$refs.treeLazy.filter(this.transferData.treeData.getTreeVal);
                        },
                        // 树搜索事件
                        filterNode:function(value, data){
                            if (!value) return true;
                            // return data[this.treeData.tree_props.label].indexOf(value) !== -1;
                            return data.basic_indicator_name.indexOf(value) !== -1;
                        },
                        // 点击复选框触发事件
                        treeSelChange:function(data,node){
                            let checkData = this.$refs.treeLazy.getCheckedNodes();
                            checkData.forEach((item, i) => {
                                item.value = item.basic_indicator_name;
                                if (item.disabled) {
                                    checkData.splice(i, 1);
                                }
                            })
                            this.$set(this.transferData.listData,'listItemData',checkData);
                            this.$set(this.transferData.listData,'copyListItemData',checkData);
                        },
                        // 列表输入框事件
                        listValChange:function(val){
                            let searchListData = [];
                            for (var i = 0; i < this.transferData.listData.copyListItemData.length; i++) {
                                if (this.transferData.listData.copyListItemData[i].value.search(val) !== -1) {
                                    //判断输入框中的值是否可以匹配到数据，如果匹配成功
                                    searchListData.push(this.transferData.listData.copyListItemData[i]);
                                }
                            }
                            if(val.length === 0){
                                searchListData = this.transferData.listData.copyListItemData;
                            }
                            this.$set(this.transferData.listData,'listItemData',searchListData);
                        },
                        handelcheckAll:function(e){
                            e.stopPropagation();
                            let checkAll = [];
                            let checked = [];
                            this.transferData.listData.listItemData.forEach(item => {
                                checkAll.push(item);
                                checked.push(item.id);
                            })
                            if (this.transferData.listData.btnIsChecked) {
                                this.transferData.listData.selCheckListData = checked;
                                this.transferData.selData.copySelListData = checkAll;
                                this.transferData.selData.selListData = checkAll;
                                this.transferData.listData.btnIsChecked = false;
                            } else {
                                this.transferData.listData.selCheckListData = [];
                                this.transferData.selData.copySelListData = [];
                                this.transferData.selData.selListData = [];
                                this.transferData.listData.btnIsChecked = true;
                            }
                        },
                        // 单选change事件
                        selRadioChange:function(val){
                            this.transferData.selData.selListData = [val]
                        },
                        // 复选change事件
                        selCheckChange:function(val){
                            let mark = false;
                            let index = null;
                            this.transferData.selData.selListData.forEach((item, i) => {
                                if (item.id === val.id) {
                                    mark = true;
                                    index = i;
                                }
                            })
                            if (mark) {
                                this.transferData.selData.selListData.splice(index, 1);
                                this.transferData.selData.copySelListData = this.transferData.selData.selListData;
                            } else {
                                this.transferData.selData.selListData.push(val);
                                this.transferData.selData.copySelListData = this.transferData.selData.selListData;
                            }
                        },
                        // 节点选中状态发生变化时的回调
                        treeCheckChange:function(data, checked, indeterminate){
                            
                        },
                        // 节点展开
                        nodeExpand: function(data, node, nodeSelf){

                        },
                        // 已选择input输入框事件
                        selValChange:function(val){
                            let searchListData = [];
                            for (var i = 0; i < this.transferData.selData.copySelListData.length; i++) {
                                if (this.transferData.selData.copySelListData[i].value.search(val) !== -1) {
                                    //判断输入框中的值是否可以匹配到数据，如果匹配成功
                                    searchListData.push(this.transferData.selData.copySelListData[i]);
                                }
                            }
                            if(val.length === 0){
                                searchListData = this.transferData.selData.copySelListData;
                            }
                            this.$set(this.transferData.selData,'selListData',searchListData);
                        },
                        // 删除选择列表数据
                        delSelListData:function(item,i,e){
                            e.stopPropagation();
                            this.transferData.selData.selListData.splice(i,1);
                            this.transferData.listData.selRadioListData = '';
                            this.transferData.listData.selCheckListData.splice(i,1);
                        },
                        onSubmit:function(e){
                            e.stopPropagation();
                        },
                        unSubmit:function(e){
                            e.stopPropagation();
                        },
                        clearBubble:function(e){
                            e.stopPropagation();
                        },
                        mounted:function(){}
                    }`,
                    cmpt_class:[],
                    cmpt_style:{}
                }
            }
        }
    },
    data () {
        return {
            transferData: null
        }
    },
    created(){
        if(typeof(this.datas.attr_data_conf) == 'string'){
            try{
                this.transferData = new Function(`return ${this.datas.attr_data_conf}`)()
            }catch(err){
                this.transferData = JSON.parse(this.datas.attr_data_conf)
            }
        }else{
            this.transferData = this.datas.attr_data_conf
        }
        let extraMethods = new Function(`return ${this.datas.event_ele_conf}`)();
        Object.keys(extraMethods).forEach(key => {
            if(key!=='mounted'){
                this[key] = extraMethods[key].bind(this);
            }
        });
    },
    mounted(){
        let extraMethods = new Function(`return ${this.datas.event_ele_conf}`)();
        if(extraMethods.mounted){//处理事件配置中的mounted
            extraMethods.mounted.bind(this)();
        }
    },
    methods: {
        eventManage(item,e){
            this[item.eName](e)
        }
    }
    
}
</script>
<style lang="less" scoped>
    .boxGrid{
        border:1px solid #e0e2e4;
        padding:10px;
    }
    .content{
        overflow:auto;
    }
    .listSelect{
        display:flex;
        flex-direction:row;
        justify-content: space-between;
    }
    .selList{
        .flexList{
            display:flex;
            flex-direction: row;
            justify-content: space-between;
            padding-left: 10px;
            line-height: 19px;
            font-size: 14px;
        }
        .selListName{
            display: inline-block;
        }
    }
    .radioCheckitem{
        margin: 5px 0;
    }
    .noData{
        text-align: center;
        color:#909399;
    }
    .savebottom{
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 10px;
        .btnmargin{
            margin-right:5px;
        }
    }
</style>
